<template>
  <div class="board-column">
    <div class="board-column-header">
      {{ headerText }}
      <el-popover
        placement="bottom-end"
        trigger="click"
        style="width: 90px;"
      >
        <ul>
          <li><el-button type="text" @click="edit(element.id)">修改名称</el-button></li>
          <li><el-button type="text" @click="del(element.id)">删除</el-button></li>
        </ul>
        <i slot="reference" class="el-icon-arrow-down ml-10 mt-3"></i>
      </el-popover>
    </div>

    <draggable
      :list="list"
      v-bind="$attrs"
      class="board-column-content"
    >
      <div v-for="element in list" :key="element.id" class="board-item">
        <img src="https://pro-ujy.xiaoheiban.cn/46f149f93ef6436c837f5f9c284609d0.jpg" alt="图标">
        <span>
          {{ element.name }} {{ element.id }}
        </span>
        <el-popover
          placement="bottom-end"
          trigger="click"
          style="width: 90px;"
          >
          <ul>
            <li><el-button type="text" @click="edit(element.id)">修改名称</el-button></li>
            <li><el-button type="text" @click="del(element.id)">删除</el-button></li>
          </ul>
          <i slot="reference" class="el-icon-arrow-down ml-10 mt-3"></i>
        </el-popover>
      </div>
    </draggable>

  </div>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  name: 'DragKanbanDemo',
  components: {
    draggable
  },
  data () {
    return {
      visible2: true
    }
  },
  props: {
    headerText: {
      type: String,
      default: 'Header'
    },
    options: {
      type: Object,
      default () {
        return {}
      }
    },
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    edit (id) {
      alert('修改')
    },
    del (id) {
      alert('删除')
    }
  }
}
</script>
<style lang="scss" scoped>
  .board-column {
    min-height: 100px;
    height: auto;
    width: 100%;
    overflow: hidden;
    margin-bottom: 40px;

    .board-column-header {
      height: 50px;
      line-height: 50px;
      width: 180px;
      overflow: hidden;
      padding: 0 20px;
      border-radius: 8px;
      box-sizing: border-box;
      border: 1px solid #ddd;

      i {
        position: relative;
        left: 60%;
        top: -20%;
      }
    }

    .board-column-content {
      width: 100%;
      height: auto;
      overflow: hidden;
      min-height: 60px;
      margin: 10px 0 10px 0;
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;

      .board-item {
        cursor: move;
        width: 236px;
        height: 70px;
        line-height: 55px;
        margin: 40px 40px 0 30px;
        border-radius: 8px;
        background-color: #fff;
        text-align: left;
        padding: 5px 10px;
        box-sizing: border-box;
        border: 1px solid #ddd;

        i {
          position: relative;
          left: 35%;
          top: -30%;
        }

        img {
          width: 52px;
          height: 52px;
          vertical-align: middle;
        }

        span {
          vertical-align: middle;
        }
      }
    }
  }
</style>
